import React from 'react';
import {connect} from 'react-redux';
import HeadNavComponent from "../../../components/headNav";
import {Toast} from 'antd-mobile';
import Css from '../../../assets/css/home/balance/index.css';
import {safeAuto,GoPagePush} from "../../../assets/js/utils";
import request from "../../../assets/js/utils/request";
class blanceComponent extends React.Component{
    constructor(props){
        super(props);
        safeAuto(props);
        this.state={
            aName:'',
            aCellphone:'',
            aProvince:'',
            aCity:'',
            aAddress:''
        }
        this.bSumbit=true
    }
    goPage(url){
        GoPagePush(this.props,url)
    }
    componentDidMount(){
        if(sessionStorage['aid']!==undefined){
            this.getSelectAddress();
        }else {
            this.getDefaultAddress()
        }


    }
    //获取选择收获地址
    getSelectAddress(){
       if(sessionStorage['aid']!==undefined){
           let sUrl=window.base.config.baseUrl+'user/address/info?uid='+this.props.state.redLogin.uid+'&aid='+sessionStorage['aid']+'&token='+window.base.config.token;
           request(sUrl,'get').then((res)=>{
               if(res.code===200){
                   localStorage['aid']=res.data.aid;
                    this.setState({
                        aName:res.data.name,
                        aCellphone:res.data.cellphone,
                        aProvince:res.data.province,
                        aCity:res.data.city,
                        aAddress:res.data.address,
                    })
               }

           })
       }
    }
    //获取默认地址
    getDefaultAddress(){
        let sUrl=window.base.config.baseUrl+'user/address/defaultAddress?uid='+this.props.state.redLogin.uid+'&token='+window.base.config.token;
        request(sUrl,'get').then((res)=>{
            if(res.code===200){
                localStorage['aid']=res.data.aid
                this.setState({
                    aName:res.data.name,
                    aCellphone:res.data.cellphone,
                    aProvince:res.data.province,
                    aCity:res.data.city,
                    aAddress:res.data.address,
                })
            }
        })
    }
    //提交订单
    sumbitBtn(){
        if(this.bSumbit){
            this.bSumbit=false;
            let temLaction=localStorage['aid'] || sessionStorage['aid'];
            if(temLaction!==undefined){
                if(this.props.state.redCart.total>0){
                    let sUrl=window.base.config.baseUrl+"order/add?token="+window.base.config.token;
                    let temData={
                        uid:this.props.state.redLogin.uid,
                        freight:this.props.state.redCart.freight,
                        goodsData: JSON.stringify(this.props.state.redCart.aCartData),
                        addsid:temLaction
                    }
                    request(sUrl,'post',temData).then((res)=>{
                        if (res.code===200){
                            Toast.info('提交成功',2);
                            this.goPage('balance/end')
                        }
                    })
                }else {
                    Toast.info('请选择商品',2)
                }
            }else {
                Toast.info('请选择收货地址',2)
            }
        }

    }
    componentWillUnmount(){
        this.setState = (state, callback) => {
            return;
        };
    }
    render(){
        return(
            <div className={Css['main']}>
                <HeadNavComponent title={'确认订单'} ></HeadNavComponent>
                <div className={Css['balance_idres_box']}>
                    {
                        sessionStorage['aid']!==undefined || localStorage['aid']!==undefined?
                            <div className={Css['balance_idres_wrap']} onClick={this.goPage.bind(this,'address/index')}>
                                <div className={Css['balance_idres_name']}>
                                    <div className={Css['balance_idres_name_title']}>收货人：</div>
                                    <div className={Css['balance_idres_name_list']}>{this.state.aName}</div>
                                    <div className={Css['balance_idres_name_title']}>电话：</div>
                                    <div className={Css['balance_idres_name_list']}>{this.state.aCellphone}</div>
                                </div>
                                <div className={Css['balance_idres_area']+' ovflOne'}>
                                    <i className={'changAreaIcn'}></i>{this.state.aProvince}{this.state.aCity}{this.state.aAddress}
                                </div>
                            </div>
                            :<div className={Css['none_address']} onClick={this.goPage.bind(this,'address/index')}>请选择地址</div>

                    }
                    <div className={Css['balance_idres_wrap']}>
                        <div className={Css['balance_idres_goPage']}>
                            <i  className={'goBackIcn'}></i>
                        </div>
                    </div>
                </div>
                <div className={Css['trapezoid']}>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                    <i> </i>
                </div>
                <div className={Css['balance_Pro']}>
                    <ul>
                        {
                            this.props.state.redCart.aCartData.length > 0?
                                this.props.state.redCart.aCartData.map((item,index)=>{
                                    return(
                                        !item.checked?
                                            <li key={index}>
                                                <div className={Css['balance_pro_img']}>
                                                    <img src={item.img} alt={item.title} />
                                                </div>
                                                <div className={Css['balance_pro_font']}>
                                                    <div className={Css['balance_pro_font_title']+' ovflOne'}>{item.title}</div>
                                                    <div className={Css['balance_pro_font_attr']}>
                                                        {
                                                            item.attrs.length>0?
                                                                item.attrs.map((item2,index2)=>{
                                                                    return(
                                                                        <p key={index2}>{item2.title}:{
                                                                            item2.param.length>0?
                                                                                item2.param.map((item3,index3)=>{
                                                                                    return(
                                                                                        <React.Fragment key={index3}>{
                                                                                            item3.title
                                                                                        }</React.Fragment>
                                                                                    )
                                                                                })
                                                                                :''
                                                                        }</p>
                                                                    )
                                                                })
                                                                :""
                                                        }
                                                    </div>
                                                    <div className={Css['balance_pro_font_quan']}>x {item.amount}</div>
                                                    <div className={Css['balance_pro_font_price']}>￥{item.price}</div>

                                                </div>
                                            </li>
                                        :''
                                    )
                                })
                            :''
                        }
                    </ul>
                </div>
                <div className={Css['balance_total']}>
                    <p>商品总额：</p>
                    <p>{this.props.state.redCart.total}元</p>
                </div>

                <div className={Css['balance_total']}>
                    <p>运费：</p>
                    <p>{this.props.state.redCart.freight}元</p>
                </div>
                <div className={Css['balance_btn']}>
                    <div className={Css['balance_btn_l']}>实际金额：<span>￥{parseFloat(Math.round(this.props.state.redCart.total + this.props.state.redCart.freight).toFixed(2))}</span></div>
                    <div className={Css['balance_btn_r']} onClick={this.sumbitBtn.bind(this)}>提交订单</div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(blanceComponent)